// import React, { Suspense } from 'react'
// import {
//     BrowserRouter,
//     Route, Routes, Navigate
// } from 'react-router-dom'
// import reouters from './routerConfig'

// interface ROUTERLIST {
//     to?: string,
//     path?: string,
//     children?: ROUTERLIST[],
//     component?: any,
// }

// export default function routerViocm() {
//     const router = (store: ROUTERLIST[]) => {
//         return store.map((item, index) => {
//             return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to} /> : <item.component />} >
//                 {
//                     item.children && router(item.children)
//                 }
//             </Route>
//         })
//     }
//     return (
//         <BrowserRouter>
//             <Suspense fallback={<div>路由加载中</div>}>
//                 <Routes>
//                     {
//                       router(reouters)  
//                     }
//                 </Routes>
//             </Suspense>
//         </BrowserRouter>

//     )
// }




import React,{Suspense} from 'react'
import reouters from './routerConfig'
import {BrowserRouter,Route,Routes,Navigate} from 'react-router-dom'
interface ROUTERDATA{
    path?:string,
    to?:string,
    children?:ROUTERDATA[],
    component?:any,
}


export default function routerViocm() {
    const storeData = (store:ROUTERDATA[])=>{
        return store.map((item,index)=>{
            return <Route key={index} path={item.path} element={item.to ? <Navigate to={item.to}/> : <item.component/>}>
                {
                    item.children && storeData(item.children)
                }
            </Route>
        })
    }
  return (
    <BrowserRouter>
        <Suspense fallback={<div>路由加载中</div>}>
            <Routes>
                    {
                        storeData(reouters)
                    }
            </Routes>
        </Suspense>
    </BrowserRouter>
  )
}
